<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>九宫格文案海报</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>
	<style>
		body,.mui-content {
			background: #FFFFFF;
		}
		.poster1 {
			padding: 0.625rem;
		}
		.poster1 p {
			color: #333333;
		}
		.poster1 button {
			display: flex;
			margin: auto;
			border-radius: 2.5rem;
			background: #FF5053;
			border: none;
			color: #FFFFFF;
			padding: 0.375rem 1.25rem;
		}
		.mui-grid-view.mui-grid-9 {
			background: #FFFFFF;
		}
		.mui-preview-image.mui-fullscreen {
			position: fixed;
			z-index: 20;
			background-color: #000;
		}
		.mui-preview-header,
		.mui-preview-footer {
			position: absolute;
			width: 100%;
			left: 0;
			z-index: 10;
		}
		.mui-preview-header {
			height: 44px;
			top: 0;
		}
		.mui-preview-footer {
			height: 50px;
			bottom: 0px;
		}
		.mui-preview-header .mui-preview-indicator {
			display: block;
			line-height: 25px;
			color: #fff;
			text-align: center;
			margin: 15px auto 4;
			width: 70px;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 12px;
			font-size: 16px;
		}
		.mui-preview-image {
			display: none;
			-webkit-animation-duration: 0.5s;
			animation-duration: 0.5s;
			-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
		}
		.mui-preview-image.mui-preview-in {
			-webkit-animation-name: fadeIn;
			animation-name: fadeIn;
		}
		.mui-preview-image.mui-preview-out {
			background: none;
			-webkit-animation-name: fadeOut;
			animation-name: fadeOut;
		}
		.mui-preview-image.mui-preview-out .mui-preview-header,
		.mui-preview-image.mui-preview-out .mui-preview-footer {
			display: none;
		}
		.mui-zoom-scroller {
			position: absolute;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			width: 100%;
			height: 100%;
			margin: 0;
			-webkit-backface-visibility: hidden;
		}
		.mui-zoom {
			-webkit-transform-style: preserve-3d;
			transform-style: preserve-3d;
		}
		.mui-slider .mui-slider-group .mui-slider-item img {
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
		}
		.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
			width: 100%;
		}
		.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
			display: inline-table;
		}
		.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
			display: table-cell;
			vertical-align: middle;
		}
		.mui-preview-loading {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: none;
		}
		.mui-preview-loading.mui-active {
			display: block;
		}
		.mui-preview-loading .mui-spinner-white {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -25px;
			margin-top: -25px;
			height: 50px;
			width: 50px;
		}
		.mui-preview-image img.mui-transitioning {
			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
			transition: transform 0.5s ease, opacity 0.5s ease;
		}
		@-webkit-keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes fadeIn {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@-webkit-keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes fadeOut {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		p img {
			max-width: 100%;
			height: auto;
		}
	</style>
	<body>
		<div class="mui-content">
			<div class="mui-row poster1">
				<div class="mui-col-xs-12">
					<p id="copytext">【全城9店自提】99元享176元【中国重庆老版火锅】家庭套餐！特色毛肚、特色肥牛、老版嫩牛肉、鸡柳、梅林午餐肉等，共15品美味，锅底料碗全安排！
						https://cd-nt.lianlianlvyou.com/?i=wxc9a266f34d745542&a=683258#/zhoubian/138896</p>
					<button type="button" onclick="copy()">复制文案</button>
					<input id="copy_content" type="text" value="" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;" />
				</div>
			</div>
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<p style="margin-top: 0.9375rem;padding: 0 0.9375rem;">点击图片放大，长按保存至相册</p>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<img src="images/pic_17.jpg" style="width: 100%;height: 100%;" data-preview-src="" data-preview-group="1">
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 ">
					<img src="images/pic_17.jpg" style="width: 100%;height: 100%;" data-preview-src="" data-preview-group="1">
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 ">
					<img src="images/pic_17.jpg" style="width: 100%;height: 100%;" data-preview-src="" data-preview-group="1">
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<img src="images/pic_17.jpg" style="width: 100%;height: 100%;" data-preview-src="" data-preview-group="1">
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<img src="images/pic_17.jpg" style="width: 100%;height: 100%;" data-preview-src="" data-preview-group="1">
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<img src="images/pic_17.jpg" style="width: 100%;height: 100%;" data-preview-src="" data-preview-group="1">
				</li>
			</ul>

		</div>
		<script src="js/mui.js"></script>
		<script src="js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			mui('body').on('tap', 'a', function() {
				window.top.location.href = this.href;
			});

			function copy() {
				let temp = document.getElementById('copytext').innerHTML
				mui.alert(temp)
			}
			mui.previewImage();
			mui.plusReady(function() {

			})
		</script>
	</body>

</html>
